<template>
    <div class="avue-contail" :class="{'avue--collapse':isCollapse}">
        <!-- <div class="avue-header"> -->
        <!-- 顶部导航栏 -->

        <!-- </div> -->
        <top />

        <div class="avue-layout" style="height:calc(100vh - 70px);">
            <!-- <div class="avue-left"> -->
            <!-- 左侧导航栏 -->
            <!-- <sidebar /> -->
            <!-- </div> -->
            <!-- <div class="avue-main"> -->
            <!-- 顶部标签卡 -->
            <!-- <tags /> -->
            <!-- 主体视图层 -->

            <!-- <el-scrollbar style="height:100%">
          
            </el-scrollbar>-->
            <!-- </div> -->

            <transition name="fade-transform" mode="out-in">
                <keep-alive>
                    <router-view class="avue-view" style="height:100%" v-if="$route.meta.$keepAlive" />
                </keep-alive>
            </transition>
            <transition name="fade-transform" mode="out-in">
                <router-view class="avue-view" v-if="!$route.meta.$keepAlive" />
            </transition>
        </div>
        <alarm ref="alarm" />
        <!-- <div class="avue-shade" @click="showCollapse"></div> -->
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import tags from './tags'
import top from './top.vue'
import sidebar from './sidebar/'
import admin from '@/util/admin'
import { validatenull } from '@/util/validate'
import { getStore } from '@/util/store.js'
import alarm from './alarm.vue'
const mqtt = require('mqtt')
import { getConfigByKeys } from '@/api/admin/config'
const WS_CONFIG = {
    uri: '/mqtt',
    userName: 'admin',
    passWord: 'admin',
    cleansession: true,
    reconnectTimeout: 10000,
    topic: 'alarm.rfid' //频道，和服务的保持一致，可调整
}
export default {
    components: {
        top,
        tags,
        sidebar,
        alarm
    },
    name: 'index',
    data() {
        return {
            //刷新token锁
            refreshLock: false,
            //刷新token的时间
            refreshTime: '',
            client: ''
        }
    },
    destroyed() {
        clearInterval(this.refreshTime)
    },
    mounted() {
        this.init()
        getConfigByKeys({ configKeys: 'sysmq_host,sysmq_port,camera_alarm_type' }).then(res => {
            if (res.data.code === 0) {
                let {sysmq_host,sysmq_port,camera_alarm_type} = res.data.data
                debugger
                this.$store.dispatch('data/setAlarmType',camera_alarm_type.split(","))
                this.mqttConnect(sysmq_host,sysmq_port)
            }
        })
    },
    computed: mapGetters(['userInfo', 'isLock', 'isCollapse', 'website', 'expires_in']),
    props: [],
    methods: {
        mqttConnect(host,port) {
            this.client = mqtt.connect(`ws://${host}:${port}`, {
                username: 'admin',
                password: 'admin'
            })
            this.client.on('connect', e => {
                console.log('连接成功')
                this.client.subscribe(WS_CONFIG.topic, err => {
                    if (!err) {
                        console.log('订阅成功:' + this.mtopic)
                    }
                })
            })
            this.client.on('message', (topic, message) => {
                console.log(message.toString())
                this.$refs['alarm'].show(message)
            })
        },
        showCollapse() {
            this.$store.commit('SET_COLLAPSE')
        },
        // 屏幕检测
        init() {
            this.$store.commit('SET_SCREEN', admin.getScreen())
            window.onresize = () => {
                setTimeout(() => {
                    this.$store.commit('SET_SCREEN', admin.getScreen())
                }, 0)
            }
        },
        // 实时检测刷新token
        refreshToken() {
            this.refreshTime = setInterval(() => {
                const token = getStore({
                    name: 'access_token',
                    debug: true
                })

                if (validatenull(token)) {
                    return
                }

                if (this.expires_in <= 1000 && !this.refreshLock) {
                    this.refreshLock = true
                    this.$store.dispatch('RefreshToken').catch(() => {
                        clearInterval(this.refreshTime)
                    })
                    this.refreshLock = false
                }
                this.$store.commit('SET_EXPIRES_IN', this.expires_in - 10)
            }, 10000)
        }
    }
}
</script>
